    <template>
    <div class="app-container">
        <div style="text-align: center;">
            <el-form :model="queryParam" ref="queryForm" :inline="true">
                <el-form-item label="发送者用户名：">
                    <el-input v-model="queryParam.sendUserName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" round @click="search" >查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%">
            <el-table-column
                    align="center"
                    label="序号"
                    type="index"
                    width="150">
                </el-table-column>
        <el-table-column prop="title" label="标题"  width="150"/>
        <el-table-column prop="messageContent" label="内容" show-overflow-tooltip />
        <el-table-column prop="sendUserName" label="发送人"  width="120" />
        <el-table-column prop="receiveNum" label="接收人数" width="120" />
        <el-table-column prop="actualReceiveNum" label="已读数" width="90" />
        <el-table-column prop="createTime" label="创建时间" width="160px"/>
        <!-- <el-table-column
            align="center"
            label="操作">
            写入相应的路由查看信息的阅读情况
        <template slot-scope="scope">
            <router-link :to="{path: '/message/detail' , query:{id: scope.row.id}}" class="link-left">
                <el-button type="primary" size="mini">查看</el-button>
            </router-link>
        </template>
        </el-table-column> -->
        </el-table>
            <!-- 分页器 -->
            <el-pagination
                style="textAlign:center;margin-top: 20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParam.pageIndex"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="queryParam.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
    </div>
    </template>

    <script>
    import { pageList } from '@/api/message/message'
    export default {
    data () {
        return {
        queryParam: {
            sendUserName: null,
            pageIndex: 1,
            pageSize: 10
        },
        listLoading: true,
        tableData: [],
        total: 0
        }
    },
    mounted () {
        this.search()
    },
    methods: {
    async search () {
            this.listLoading = true
            let resp = await pageList(this.queryParam);
            this.listLoading = false
            this.tableData = resp.data.records;
            this.queryParam.pageIndex = resp.data.current;
            this.queryParam.pageSize = resp.data.size;
            this.total = resp.data.total;
        },
        // 分页相关
        handleSizeChange(val) {
            this.queryParam.pageSize = val;
            this.search();
        },
        handleCurrentChange(val) {
            this.queryParam.pageIndex = val;
            this.search();
        },
    }
    }
    </script>
